<html lang="en" class="">
<head>

    <meta charset="UTF-8">
    <meta name="robots" content="noindex">

    <link rel="stylesheet" href="../static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/plugins/messenger/messenger-theme-future.css">
    <link rel="stylesheet" href="../static/plugins/messenger/messenger.css">
    <script src="../static/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../static/bootstrap/js/bootstrap.min.js"></script>
    <script src="../static/plugins/messenger/messenger.min.js"></script>


    <style class="cp-pen-styles">html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    .bg-div {
        background: url('../static/images/bg.jpg') center;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
    }

    .signin {
        width: 100%;
        height: 100%;
        text-align: center;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .user-avater {
        border-radius: 50%;
        border: 4px solid #fff;
    }

    .box {
        width: 400px;
        color: #666;
        text-align: center;
        margin-top: 30px;
        margin-bottom: 100px;
        border-radius: 4px;
        border: 2px solid rgba(255, 255, 255, 0.2);
        border-top: 0;
        position: relative;
    }

    .box::after {
        content: '';
        display: block;
        width: 40px;
        height: 40px;
        position: absolute;
        top: -20px;
        left: 50%;
        margin-left: -21px;
        border-top-left-radius: 4px;
        border-left: 2px solid rgba(255, 255, 255, 0.3);
        border-top: 2px solid rgba(255, 255, 255, 0.3);
        transform: rotate(45deg);
        box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    .box::before {
        content: '';
        display: block;
        width: 400px;
        height: 2px;
        position: absolute;
        /* margin: -199px 199px; */
        border-top-left-radius: 4px;
        /* transform: rotate(90deg); */
        box-shadow: inset 171px 0 0 0 rgba(255, 255, 255, 0.2), inset -171px 0 0 0 rgba(255, 255, 255, 0.2);
    }

    .signin-form {
        height: calc(30% - 40px);
        padding: 20px;
    }

    .btn {
        color: #fff;
        display: inline-block;
        margin-bottom: 0;
        font-weight: normal;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        background-image: none;
        border: 1px solid transparent;
        white-space: nowrap;
        padding: 6px 12px;
        font-size: 13px;
        line-height: 1.42857143;
        border-radius: 0px;
        -webkit-user-select: none;
    }

    .btn-submit {
        width: 360px;
        height: 40px;
        background-color: #3B89F5;
        border-color: #3B89F5;
        margin-top: 20px;
    }

    .btn-submit:hover {
        color: #fff;
        background-color: #0C6CED;
        border-color: #0C6CED;
        text-decoration: none;
    }

    input::-webkit-input-placeholder {
        color: #242424;
    }

    .form-control {
        display: block;
        width: 100%;
        height: 40px;
        padding: 6px 12px;
        font-size: 15px;
        line-height: 1.42857143;
        color: #fff;
        box-sizing: border-box;
    }

    .form-control:focus {
        border-color: rgba(59, 137, 245, 0.5);
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(59, 137, 245, 0.6);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(59, 137, 245, 0.6);
    }

    .form-input {
        background: transparent;
        border: 2px solid rgba(255, 255, 255, 0.3);
        box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.2), 0 0 4px rgba(255, 255, 255, 0.2);
    }

    .save-div {
        color: #fff;
        font-weight: bold;
    }

    .save-checkbox {
        float: left;
    }

    .save-pass {
        float: left;
    }

    .save-text {
        float: right;
        color: #DD4B39;
    }

    .signup {
        font-weight: 400;
        font-size: 13px;
        color: #fff;
        margin-top: 8px;
        display: block;
    }

    .signup-a {
        color: #468BEA;
        font-weight: bold;
    }

    </style>
</head>
<body>
<div class="bg-div"></div>

<div class="signin">
    <img class="user-avater" src="static/images/user.png"/>

    <div class="box">

        <form class="signin-form" id="login_form" action="/login" method="POST">
            <div>
                <input class="form-control form-input" placeholder="用户名" type="text" name="username" onkeyup=""/>
            </div>
            <div class="" style="margin: 20px 0;">
                <input class="form-control form-input" placeholder="密   码" type="password" name="password"/>
            </div>
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>

            <div>

                <button type="button" id="login_submit" class="btn btn-info pull-right" style="width:356px"
                        onclick="login()">提交
                </button>
            </div>

        </form>
    </div>

</div>
</body>

<script>
    Messenger.options = {
        extraClasses: 'messenger-fixed messenger-on-bottom messenger-theme-air messenger-on-right'
    }

    $("input").keydown(function () {
        if (event.keyCode == "13") {
            login();
        }
    });

    function login() {

        form = $("form#login_form");
        messenger = Messenger();
        $.ajax({
            type: form.attr('method'),
            url: form.attr('action'),
            data: form.serialize(),
            success: function (data) {
                var response = JSON.parse(data);
                if (response.status == "success") {
                    messenger.post({
                        message: response.content,
                        type: "success"
                    });
                    setTimeout(" window.location.href = '" + response.redirect + "'", 10);


                } else if (response.status == "error")

                    messenger.post({
                        message: response.content,
                        type: "error"
                    })
            }
        });


    }


</script>

</html>